<template>
    <view class="userinfo">
        <view class="userinfo-main" style="margin-top: 0">
            <view class="hy-sr">
                <view class="hy-title">头像</view>
                <view @click="chooseImage" class="hy-right1">
                    <image style="border-radius: 50%" :src="userDetail.avatar" mode=""></image>
                    <view class="right-icon"><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image></view>
                </view>
            </view>

            <view @click="showChangeNickname = true" class="hy-sr">
                <view class="hy-title">昵称</view>
                <view class="hy-right1">
                    <input
                        disabled
                        type="text"
                        v-model="userDetail.nickname"
                        placeholder="请输入"
                        style="text-align: right"
                    />
                    <view class="right-icon"><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image></view>
                </view>
            </view>
            <view class="hy-sr">
                <view class="hy-title">手机号</view>
                <view class="hy-right1">
                    <input
                        disabled
                        type="text"
                        :value="userDetail.phone"
                        placeholder="请输入"
                        style="text-align: right"
                    />
                </view>
            </view>
        </view>
        <view style="height: 20rpx"></view>

        <view @click="goToUserInfo" class="userinfo-main" style="margin-top: 0; padding: 0 30rpx">
            <view class="hy-sr">
                <view class="hy-title">详细资料</view>
                <view v-if="userDetail.completeStatus == 0" class="hy-right1">
                    <input disabled type="text" value="" placeholder="未完善" style="text-align: right" />
                    <view class="right-icon"><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image></view>
                </view>
            </view>
            <view v-if="userDetail.completeStatus == 1">
                <view class="hy-sr">
                    <view class="hy-title">性别</view>
                    <view class="hy-right1">
                        <picker :disabled="pickAble" :range="sexList" range-key="name" @change="sexTypeChange">
                            <view
                                style="
                                    width: 400rpx;
                                    margin-left: auto;
                                    margin-right: 0rpx;
                                    display: flex;
                                    flex-direction: row-reverse;
                                    align-items: center;
                                "
                            >
                                <image
                                    style="height: 32rpx; width: 32rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png"
                                    mode=""
                                ></image>
                                <label
                                    style="color: #333333; font-size: 28rpx; text-align: right; margin-right: 20rpx"
                                    >{{ userDetail.gender == 0 ? '男' : '女' }}</label
                                >
                            </view>
                        </picker>
                    </view>
                </view>
                <view @click="showChangeHeight = true" class="hy-sr">
                    <view class="hy-title">身高</view>
                    <view class="hy-right1">
                        <label style="color: #333333; font-size: 28rpx; text-align: right"
                            >{{ userDetail.height }}cm</label
                        >
                        <view class="right-icon"><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image></view>
                    </view>
                </view>

                <view @click="showChangeWeight = true" class="hy-sr">
                    <view class="hy-title">最新体重</view>
                    <view class="hy-right1">
                        <label style="color: #333333; font-size: 28rpx; text-align: right"
                            >{{ userDetail.latestWeight }}kg</label
                        >
                        <view class="right-icon"><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image></view>
                    </view>
                </view>
                <view class="hy-sr" @click="setBirthday">
                    <view class="hy-title">出生日期</view>
                    <!--			  <view class="hy-right1">-->
                    <!--				<view style="width: 400rpx;margin-left: auto;margin-right: 0rpx;display: flex;flex-direction: row-reverse;align-items: center;">-->
                    <!--					<image style="height: 32rpx;width: 32rpx;" src="../../../static/img/icon-right.png" mode=""></image>-->
                    <!--					<label style="color: #333333;font-size: 28rpx;text-align: right;margin-right: 20rpx;">{{ userDetail.birthday }}</label>-->
                    <!--				</view>-->
                    <!--			  </view>-->
                    <view class="hy-right1">
                        <view
                            style="
                                width: 400rpx;
                                margin-left: auto;
                                margin-right: 0rpx;
                                display: flex;
                                flex-direction: row-reverse;
                                align-items: center;
                            "
                        >
                            <image
                                style="height: 32rpx; width: 32rpx"
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png"
                                mode=""
                            ></image>
                            <dyDatePicker
                                @getData="bindDateChange"
                                :max-select="maxPickerDay"
                                :childValue="userDetail.birthday"
                            ></dyDatePicker>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!--	<picker-date :show="showBirthDay" @cancle="closeBirthday" @confirm="bindDateChange" ></picker-date>-->
        <change-nickname-view
            @confirm="confirmNickname"
            :defaultNickname="userDetail.nickname"
            @close="showChangeNickname = false"
            :show="showChangeNickname"
        ></change-nickname-view>
        <change-weight-view
            :defaultWeight="userDetail.latestWeight"
            @confirm="confirmWeight"
            @close="showChangeWeight = false"
            :show="showChangeWeight"
        ></change-weight-view>
        <change-height-view
            :defaultHeight="userDetail.height"
            @confirm="confirmHeight"
            @close="showChangeHeight = false"
            :show="showChangeHeight"
        ></change-height-view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import dyDatePicker from '../../../components/dy-Date/dy-Date.vue';
export default {
    components: {
        dyDatePicker,
    },
    data() {
        return {
            maxPickerDay: this.helper.formatDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)),
            value: '',
            show: false,
            fileList1: [],
            date: '选择日期',
            userDetail: {},
            sexList: [
                {
                    gender: 0,
                    name: '男',
                },
                {
                    gender: 1,
                    name: '女',
                },
            ],
            showChangeNickname: false,
            showChangeWeight: false,
            showChangeHeight: false,
            showBirthDay: false,
            pickAble: false,
        };
    },
    computed: {
        ...mapState(['isLogin', 'userInfo']),
    },
    onShow() {
        this.requestUser();
    },
    onUnload() {
        this.pickAble = true;
    },
    methods: {
        ...mapMutations(['loginSaveUserInfo', 'logout']),
        confirmHeight(e) {
            if (e != '' && e != undefined && e != null) {
                this.showChangeHeight = false;
                this.userDetail.height = e;
                this.sendUserData();
            }
        },
        Inputweight(e) {
            this.userDetail.latestWeight = e;
        },
        confirmWeight(e) {
            if (e != '' && e != undefined && e != null) {
                this.showChangeWeight = false;
                this.userDetail.latestWeight = e;
                this.sendUserData();
            }
        },
        confirmNickname(e) {
            this.showChangeNickname = false;
            this.userDetail.nickname = e;
            this.commitEvent();
        },
        sexTypeChange(e) {
            this.userDetail.gender = this.sexList[e.detail.value].gender;
            this.sendUserData();
        },
        setBirthday() {
            this.showBirthDay = true;
        },
        closeBirthday() {
            this.showBirthDay = false;
        },
        bindDateChange: function (value) {
            this.userDetail.birthday = value;
            this.sendUserData();
            this.closeBirthday();
        },
        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${this.userInfo.uid}`, null, 'POST', true)
                .then((res) => {
                    if (res.code == 0) {
                        this.userDetail = res.data;
                    }
                });
        },
        sendUserData() {
            var form = {
                gender: this.userDetail.gender,
                height: this.userDetail.height,
                weight: this.userDetail.latestWeight,
                birthday: this.userDetail.birthday,
            };
            this.request
                .httpTokenJsonRequest('/mp-api/wx/user/improve/information', form, 'POST', false)
                .then((res) => {
                    if (res.code == 0) {
                    }
                });
        },
        goToUserInfo() {
            if (this.userDetail.completeStatus == 0) {
                uni.navigateTo({
                    url: '/packageMine/pages/userinfo/userinfo',
                });
            }
        },
        getDate() {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
        chooseImage() {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                success: (res) => {
                    var filePath = res.tempFilePaths[0];
                    this.changeAvatar(filePath);
                },
            });
        },
        changeAvatar(fileUrl) {
            uni.showLoading({
                title: '头像上传中',
            });
            uni.uploadFile({
                url: this.request.baseUrl + '/mp-api/wx/user/change/avatar',
                method: 'POST',
                header: {
                    'x-accesstoken': this.request.getToken(),
                },
                filePath: fileUrl,
                name: 'file',
                success: (res) => {
                    uni.hideLoading();
                    if (res.statusCode === 200) {
                        this.requestUser();
                    }
                },
                fail: (err) => {
                    uni.hideLoading();
                },
            });
        },
        commitEvent() {
            if (this.userDetail.nickname == '' || this.userDetail.nickname == undefined) {
                uni.showToast({
                    title: '昵称不能为空！',
                    icon: 'none',
                });
                return;
            }
            var form = {
                nickname: this.userDetail.nickname,
            };
            this.request.httpTokenJsonRequest('/mp-api/wx/user/update', form, 'POST', false).then((res) => {
                if (res.code == 0) {
                }
            });
        },

        nicknameInput(e) {},
    },
};
</script>

<style lang="scss" scoped>
body,
.userinfo {
    height: 100%;
    min-height: 100%;
    background-position: center;
}
uni-page-body,
html {
    height: 100%;
}
.userinfo-main {
    height: auto;
}
.hy-sr:last-child {
    border-bottom: none;
}
.hy-right1 {
    justify-content: flex-end;
}
</style>
